<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_2_固定定位广告条</title>
    <style>
        .top{
            background-color:#5AA4Ae;
            height: 120px;
            color: #fff;
            font-size: 30px;
            /*使用固定定位*/
            position: fixed;
            /*设置宽度为视图(view port)宽度的确100%*/
            width: 100vw;
            top: 0;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .right{
            background-color: #f35336;
            right: 20px;
        }
        .main{
            /*让内容向下一点，不然会遮住部分文字*/
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolor dolore esse explicabo, hic ipsa
        ipsam libero modi nobis non, porro, provident quo reprehenderit! Accusamus doloribus ducimus fugiat itaque
        suscipit?
    </div>
    <div>Aperiam corporis, debitis doloribus et iusto laboriosam nihil odio praesentium, recusandae sint tempore velit
        veniam. Atque deleniti ea nesciunt quas quod. Autem eaque eum impedit labore natus sequi vel voluptate.
    </div>
    <div>Est neque quibusdam quidem sint sit. Aspernatur blanditiis dolor id impedit labore nam officiis praesentium
        quam, quisquam reiciendis repudiandae sint, tempore temporibus. Eveniet ex iure libero nulla porro possimus
        sunt.
    </div>
    <div>A ad asperiores assumenda autem commodi cumque ducimus eaque earum, eum explicabo fugiat inventore iure, magnam
        magni minima molestias quam quasi, quibusdam quis quisquam suscipit totam unde voluptatem? Incidunt, sunt?
    </div>
    <div>Asperiores, beatae earum labore molestiae nemo repudiandae. Aliquam, blanditiis dolorum harum inventore minus
        officiis repudiandae tempora voluptate! Eaque eius est illo, ipsa labore laboriosam minima possimus quae quos
        sunt temporibus!
    </div>
    <div>A minima nam nobis quam quod rem sint velit veritatis voluptatem voluptatum. At, commodi dolorem facilis fuga
        fugiat inventore itaque iure laboriosam libero minima minus nostrum obcaecati odio quidem voluptatem.
    </div>
    <div>A alias at atque blanditiis, cumque delectus dicta ducimus eos eum iste itaque laboriosam laudantium nihil
        obcaecati placeat quae reiciendis repellat repellendus saepe sit vero vitae voluptas. Dolorum, hic quasi!
    </div>
    <div>Accusamus architecto asperiores, at cumque ducimus expedita facilis in, incidunt inventore iusto labore
        molestias numquam obcaecati pariatur possimus quam quasi reprehenderit sapiente, totam unde velit vitae
        voluptatum? Accusamus expedita, in?
    </div>
    <div>Alias assumenda consectetur delectus dolor enim iste laboriosam magni odit, optio praesentium quos rerum,
        sapiente, soluta tenetur veritatis. Commodi doloremque doloribus error illum ipsam libero minima nobis odio quod
        ratione?
    </div>
    <div>Accusantium aliquid animi debitis dignissimos excepturi exercitationem id impedit in ipsam itaque, iusto
        laudantium, maxime minima mollitia nemo nihil nulla quam quisquam ratione repudiandae sed similique sunt tempora
        vel voluptas?
    </div>
    <div>Culpa doloribus ducimus eius eos error eveniet excepturi fuga maxime nam natus neque quae quaerat quam quia,
        quo totam voluptate voluptatum. Amet, autem culpa doloremque ea ipsum reprehenderit ullam voluptates.
    </div>
    <div>Animi cupiditate fuga nulla reiciendis veniam! Labore necessitatibus tempore totam? Distinctio impedit libero
        minus nesciunt non officia, quas quibusdam recusandae reprehenderit repudiandae similique soluta veniam
        voluptate! Ab assumenda nam qui!
    </div>
    <div>Adipisci amet autem debitis ea esse illo in ipsam itaque, iusto labore mollitia necessitatibus non obcaecati
        perferendis provident ratione repellat repellendus vero. Amet dignissimos dolore eveniet modi quod repellendus
        voluptatum?
    </div>
    <div>Aliquid animi beatae consectetur, consequatur, cupiditate maxime nobis odio quas quibusdam, quos reprehenderit
        tempore? Ad atque, cumque, deserunt dolor ea eveniet ipsa nisi odio praesentium quo repellendus rerum similique
        velit.
    </div>
    <div>Adipisci at cumque deleniti, dicta dignissimos dolorum ea, earum eius est et explicabo harum incidunt iusto
        labore laboriosam molestiae nostrum nulla odit, pariatur possimus quam quas recusandae tempore voluptatem
        voluptatum.
    </div>
    <div>Architecto atque corporis deserunt doloribus eaque, eligendi eum, ex facere fuga hic ipsam maxime perspiciatis
        quibusdam sapiente similique sint ullam. Amet aperiam, commodi doloremque incidunt nemo nostrum quaerat quo
        repudiandae?
    </div>
    <div>Amet aperiam asperiores, at aut beatae blanditiis culpa cumque dolorum eius fugit impedit, minus nobis numquam
        obcaecati, odit optio quas quia sit soluta ullam! Alias dolore eos quasi quia quo!
    </div>
    <div>Autem corporis inventore, laborum nemo nihil numquam officia officiis omnis pariatur porro quos rerum, sequi
        suscipit? Debitis doloribus iure perferendis? A autem eaque explicabo incidunt ipsam, natus officia repellendus
        temporibus.
    </div>
    <div>Ab accusantium aliquam assumenda consequatur consequuntur deleniti doloribus eligendi facere fugiat minima,
        obcaecati perspiciatis, recusandae reiciendis repellendus, similique sunt totam vel. Ab corporis eos error
        impedit placeat sint. Quibusdam, velit.
    </div>
    <div>Aliquam aliquid, assumenda blanditiis culpa delectus dolorum ducimus earum eius facere ipsa laborum maxime
        minus natus nemo nesciunt nisi nobis numquam officiis praesentium provident qui quod rerum saepe sint soluta!
    </div>
    <div>Accusamus alias architecto asperiores aspernatur, atque cupiditate debitis deserunt dolorum eaque eligendi eos
        illum libero magnam minus, nam officia perferendis quia quod ratione recusandae rerum sequi sunt temporibus ut,
        velit.
    </div>
    <div>Aperiam architecto asperiores beatae commodi dicta dolor eos explicabo, fugit labore magnam magni modi natus
        nesciunt nihil nisi praesentium provident rem repellendus sunt unde veniam voluptatibus voluptatum? Deserunt
        tenetur, veritatis.
    </div>
    <div>Aliquam aperiam ipsa nisi, odit officia sit tempore tenetur voluptates? Ab amet aperiam asperiores aut deleniti
        dolor dolores explicabo, labore laudantium maiores minus nam porro, tempora ullam ut velit voluptates.
    </div>
    <div>Accusamus asperiores enim, hic in incidunt iure modi nihil, officia quos ullam vero vitae voluptatum. Accusamus
        asperiores debitis distinctio doloribus enim fugiat repudiandae rerum sed soluta vero? Aspernatur, consequatur
        sint.
    </div>
    <div>Adipisci culpa deserunt distinctio eos esse fugit hic id incidunt iste labore modi molestiae necessitatibus
        odit optio qui quia quibusdam quidem quos repellendus repudiandae saepe soluta tenetur unde ut, voluptatum.
    </div>
    <div>Hic itaque natus nemo, quia tempore ut. Ab architecto blanditiis deleniti eos expedita iusto nam quaerat quo
        quos voluptates? Cumque esse et laudantium quaerat! Consectetur expedita iusto maxime quisquam ut.
    </div>
    <div>Adipisci assumenda deserunt necessitatibus nostrum omnis praesentium quas, repellendus sit, temporibus totam
        unde voluptate. Asperiores delectus deserunt dolorem eligendi expedita, hic iste, laborum nulla quam quia unde
        velit voluptate voluptatum!
    </div>
    <div>Ad aperiam delectus facilis quam sint! Assumenda earum hic neque nobis repellendus! Ab aliquam aliquid
        excepturi harum labore, magni minus nemo nihil odio optio, possimus quasi quibusdam sint! Deserunt, voluptates!
    </div>
    <div>Aliquid, consectetur ducimus excepturi illum, incidunt labore laudantium modi molestias, officia quidem ut
        veritatis voluptate? Alias asperiores aut consequatur consequuntur est exercitationem odio officia recusandae
        saepe, sit temporibus, ullam, vel!
    </div>
    <div>A accusamus commodi cum cumque distinctio dolor, dolore dolorem esse eveniet harum maiores modi molestiae nihil
        non nostrum nulla omnis quaerat quidem quis quisquam recusandae repellendus sed sequi velit, veniam.
    </div>
    <div>A asperiores blanditiis consequatur distinctio dolore doloribus eius eos excepturi facere facilis fugiat ipsum
        iste magnam, minus nisi quo ratione, reprehenderit repudiandae, sit sunt! Exercitationem molestiae odit soluta
        velit voluptates!
    </div>
    <div>A, aliquid architecto at beatae consequuntur, dicta dignissimos dolor dolorum enim ex exercitationem hic ipsa
        minus nam necessitatibus nemo nobis obcaecati possimus quas reiciendis reprehenderit sed similique. Expedita,
        magnam, rerum.
    </div>
    <div>Aliquid architecto asperiores autem, consectetur dolorum eligendi nobis odio quasi, quo repellat tempore vel?
        Aliquam consequatur deleniti distinctio, enim eos inventore laborum maiores, neque obcaecati, pariatur
        perspiciatis quos sequi similique.
    </div>
    <div>Corporis dolorem illo officiis pariatur. Ad excepturi quos rerum. Ad, animi, qui? Ad eligendi fugiat in
        obcaecati sint sunt vitae. Aut consectetur consequatur cupiditate delectus, dolores non unde. Nihil, soluta.
    </div>
    <div>Accusamus amet architecto dolores fugiat ipsa libero qui! Dolor ex explicabo minima natus necessitatibus
        quaerat quo? A, consequuntur eveniet inventore iusto nihil pariatur quia sed tempora voluptas voluptatem?
        Doloribus, nostrum.
    </div>
    <div>Accusantium alias exercitationem fuga laborum laudantium magni nemo, odio quam repudiandae vel! A aliquam
        dolores error, nam obcaecati odit perspiciatis, recusandae, repellat repellendus reprehenderit unde vel velit?
        Ipsam, laborum, pariatur.
    </div>
    <div>A atque dolores, eius excepturi facilis fugiat ipsa praesentium ratione repellat? Architecto consectetur cumque
        cupiditate, dolor eius expedita ipsa iste laudantium molestiae nam nemo provident quia, quo recusandae
        veritatis. In.
    </div>
    <div>Corporis cumque pariatur quae? Asperiores cum dolorem doloribus ducimus eius officia repellendus saepe! Ab at
        cumque dolore dolorum eius error fuga, inventore labore laboriosam magnam magni non quaerat sequi tempora?
    </div>
    <div>Animi aperiam architecto beatae culpa debitis delectus eligendi ex fuga harum nostrum, officiis porro quaerat
        quia quibusdam, quos reiciendis, reprehenderit rerum velit! Aliquid assumenda culpa perferendis praesentium
        reiciendis, vero voluptas.
    </div>
    <div>A dicta doloremque, ea earum et, harum inventore iure minus praesentium quae qui, quibusdam quis repellendus
        sunt ullam. Ad assumenda consequatur dolores iure mollitia nihil nulla quae, reprehenderit sed tempore.
    </div>
    <div>A, aspernatur consequuntur dolor eaque illo inventore, minus nostrum nulla, quos sequi similique ullam vitae.
        Aliquam aperiam at blanditiis doloremque ipsam, ipsum mollitia nobis obcaecati optio quis reiciendis tempora ut!
    </div>
    <div>Aperiam cum delectus dolorem doloribus error, illum iusto minus molestias nam nesciunt nostrum, ullam
        veritatis. Molestias, quia, voluptatem. Animi eius et laboriosam natus nostrum numquam porro quae repellendus
        voluptatem voluptates?
    </div>
    <div>Consectetur, eius eos ipsum minus nam obcaecati perspiciatis porro qui repellat totam velit veniam voluptatum.
        Alias delectus eaque iusto provident. Aut consequuntur delectus, deleniti ea eveniet fugit harum numquam
        temporibus.
    </div>
    <div>Accusantium aliquam animi autem beatae commodi corporis cumque dignissimos distinctio dolores eveniet illo,
        impedit iure laboriosam laborum, modi necessitatibus nesciunt nihil obcaecati quasi quis ratione sed sint sunt
        temporibus ullam?
    </div>
    <div>Dicta, laboriosam magnam! Adipisci, dolore fugiat ipsum nam nostrum numquam possimus quidem quis sed velit. Aut
        beatae cum, deserunt eaque expedita facere facilis hic magnam, maiores, molestiae perspiciatis placeat voluptas?
    </div>
    <div>Est magnam magni odit similique vel! Amet dolorem exercitationem expedita itaque maxime nihil non quaerat ut
        voluptates, voluptatibus. Est excepturi in inventore iste magnam nobis praesentium qui quis quo ut.
    </div>
    <div>Ab aliquid animi asperiores assumenda at consequatur corporis dicta dolores eaque eos, error hic in ipsa,
        laboriosam laudantium minus optio placeat quae qui, ratione repellat repellendus reprehenderit sequi tenetur ut.
    </div>
    <div>Atque enim laborum magnam non optio quibusdam quod recusandae sunt ut? Aliquam amet doloremque ea enim, esse
        fuga in modi molestiae natus neque officiis perspiciatis quae saepe sed ullam voluptatibus?
    </div>
    <div>Ab alias delectus deleniti esse inventore, nihil. At blanditiis, consequatur culpa ea id impedit maxime nobis
        totam! Aperiam eaque iste minus mollitia nisi! Accusamus corporis, exercitationem iste nihil perspiciatis saepe.
    </div>
    <div>Accusamus accusantium assumenda aut excepturi molestiae nostrum quas repellendus tempora. Aspernatur beatae
        doloribus earum esse est eum iure, iusto laudantium magni nemo neque placeat quasi, reiciendis rem sint, tempora
        veniam?
    </div>
    <div>Ad atque beatae corporis culpa cum dicta dolorem eaque est eum in ipsa laboriosam magnam minima nihil non quia
        quidem quisquam recusandae, sit tempore temporibus unde vero voluptate voluptatem voluptatibus.
    </div>
    <div>Alias architecto autem commodi, cumque cupiditate delectus dicta dignissimos dolore doloribus enim eveniet
        expedita incidunt iusto labore laudantium modi necessitatibus neque numquam obcaecati, odio porro quidem saepe
        similique tenetur voluptate?
    </div>
    <div>Harum ipsa quae soluta tempore voluptatem? Dolor, exercitationem suscipit. A, atque blanditiis dolore ex
        excepturi impedit laboriosam minus molestiae necessitatibus nihil obcaecati odit quas rem repellendus
        repudiandae, sapiente voluptatibus voluptatum!
    </div>
    <div>Aperiam asperiores, aut dicta dignissimos ea earum error eveniet impedit laboriosam, minima molestias nesciunt
        perferendis quas quis quos repellat saepe sit veniam? Architecto dolore fuga fugit inventore natus nihil
        ratione!
    </div>
    <div>Alias atque dolorum, facilis laborum libero maiores molestias optio perspiciatis, quis quos recusandae
        reiciendis repellat repudiandae sed vel velit, voluptas! Accusamus autem beatae dolorum est exercitationem
        explicabo magnam quaerat quidem!
    </div>
    <div>Architecto ea, eaque enim error excepturi facere magnam magni non quibusdam rerum sequi sunt velit vitae
        voluptatibus voluptatum. Excepturi expedita hic omnis optio repellendus sed? Accusantium odit sunt velit. Error?
    </div>
    <div>Amet expedita impedit iusto laudantium minus voluptatem voluptates. A alias deleniti dignissimos dolor eveniet
        facilis ipsum mollitia, nam nesciunt nulla, odit praesentium quia quod quos sint tempore tenetur vitae
        voluptates.
    </div>
    <div>Accusantium aliquid architecto consequuntur impedit inventore optio quia repudiandae similique, tempore
        voluptatibus. Exercitationem, unde, voluptas! Doloremque magni quidem quis veritatis! Delectus deserunt dicta
        eligendi et minima molestiae numquam odit ullam.
    </div>
    <div>Ad, aspernatur at dignissimos ea error eveniet expedita explicabo facilis incidunt ipsum numquam pariatur qui
        sed ullam vero voluptas voluptate. Sed, sint, vel. Aliquam eligendi magni officia tenetur vero vitae?
    </div>
    <div>A accusamus accusantium aperiam dignissimos distinctio dolorem earum et facilis impedit laboriosam laborum
        maiores molestias nam nobis nulla obcaecati officia quibusdam quo quos, reiciendis reprehenderit sed tempora
        tempore veniam voluptatum?
    </div>
</div>
</body>
</html>